<template>
  <div class="course-setting">
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="110px"
      size="small"
      class="form-scroll"
    >
      <el-row :gutter="20">
        <CoverImg
          :defaultValue="coverImgInfo"
          @e-coverImgId="setCoverImgId"
          :type="$store.getters.libraryType"
          :tipsTxt="tipsTxt"
        />
        <el-col :span="14">
          <div v-if="$store.getters.libraryType == 1">
            <el-form-item v-if="courseTitleShow" label="名称" prop="code">
              <CourseTitleSelect
                :defaultValue="form.code"
                :courseType="form.courseType"
                @e-courseTitleData="setCourseTitle"
                disabled
              />
            </el-form-item>
            <el-form-item v-if="!courseTitleShow" label="名称" prop="title">
              <el-input v-model.trim="form.title"></el-input>
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item label="名称" prop="title">
              <el-input v-model.trim="form.title"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <!-- <el-col :span="14" v-if="$store.getters.libraryType == 1">
          <el-form-item label="课程编码">
            <el-input v-model.trim="schoolInfo.code" disabled></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="14">
          <el-form-item
            :label="form.sourceType == 1 ? '建设单位' : '资源引进单位'"
            prop="sourceUnit"
          >
            <UnitSelect
              :defaultValue="form.sourceUnit"
              @e-unitData="setUnitId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14" v-if="form.sourceType == 2">
          <el-form-item label="资源建设单位" prop="extFiled2">
            <el-input v-model.trim="form.extFiled2"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item
            label="培训层次"
            prop="trainingLevel"
            v-if="$store.getters.libraryType == 1"
          >
            <TrainingSelect
              :defaultValue="form.trainingLevel"
              @e-trainData="setTrainId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="资源分类" prop="labelValue">
            <LabelSelect
              :type="$store.getters.libraryType"
              labelType="1"
              :defaultValue="form.labelValue"
              @e-labelData="setLabelId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14" v-if="$store.getters.libraryType == 2">
          <el-form-item label="列表颜色">
            <el-color-picker v-model="form.extFiled1"></el-color-picker>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="负责人">
            <el-input v-model.trim="form.responsiblePerson"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="联系方式">
            <el-input v-model.trim="form.responsiblePhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14" v-show="checkedData.courseType == 1">
          <el-form-item label="思政设计">
            <CourseFile />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="简介">
            <UEditor
              ref="ueditor"
              :ueWidth="ueWidth"
              :defaultMsg="form.content"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="save">
      <el-button @click="submitForm('form')" type="custom" v-preventReClick
        >保 存</el-button
      >
      <el-button @click="handleBack()" type="custom" plain>取 消</el-button>
    </div>
  </div>
</template>
<script>
import {
  sysCourseUpdate,
  sysCourseQuery,
} from '@/api/admin/courseLibrary/sysCourse.js'
import { BackList } from '@/views/Admin/courseLibrary/mixins/BackList.js'
export default {
  mixins: [BackList],
  components: {
    CoverImg: () => import('@/components/coverImg'),
    TrainingSelect: () => import('@/components/trainingSelect'),
    UnitSelect: () => import('@/components/unitSelect'),
    LabelSelect: () => import('@/components/labelSelect'),
    CourseTitleSelect: () => import('@/components/courseTitleSelect'),
    CourseFile: () => import('./courseFile.vue'),
  },
  data() {
    return {
      checkedData: {},
      coverImgInfo: null,
      courseId: this.$store.getters.courseId,
      courseTitleShow: false,
      type: this.$route.meta.type,
      tipsTxt: '',
      form: {
        id: '',
        title: '',
        code: '',
        content: '',
        sourceType: 1, //1-校内，2-校外
        labelType: 1,
        code: '', //课程编号(校内，code传引用课本源ID)
        sourceUnit: '',
        extFiled2: '', //校外资源建设单位
        labelValue: '',
        fileId: '',
        trainingLevel: '',
        responsiblePerson: '', //负责人
        responsiblePhone: '', //负责人电话
        extFiled1: '', //列表颜色
      },
      rules: {
        code: [{ required: true, message: '请选择名称', trigger: 'blur' }],
        title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        sourceUnit: [
          { required: true, message: '请选择建设单位', trigger: 'blur' },
        ],
        trainingLevel: [
          { required: true, message: '请选择培训层次', trigger: 'blur' },
        ],
        extFiled2: [
          { required: true, message: '请输入资源建设单位', trigger: 'blur' },
        ],
        labelValue: [
          { required: true, message: '请选择资源分类', trigger: 'blur' },
        ],
      },
      schoolInfo: {},
    }
  },
  computed: {
    ueWidth() {
      return this.$store.getters.windowWidth > 1400 ? 820 : 600
    },
  },
  mounted() {
    this.getInfo()
    this.titleShow()
    if (this.type == 3) {
      this.tipsTxt = '284*500'
    }
    this.$bus.$on('refreshCourseInfo', () => {
      this.getInfoById()
    })
  },
  beforeDestroy() {
    this.$bus.$off('refreshCourseInfo')
  },
  methods: {
    setCourseTitle(v) {
      this.form.code = v.id || ''
      this.schoolInfo = v || {}
    },
    setTrainId(v) {
      this.form.trainingLevel = v || ''
    },
    setUnitId(v) {
      this.form.sourceUnit = v || ''
    },
    setLabelId(v) {
      this.form.labelValue = v
    },
    setCoverImgId(v) {
      this.form.fileId = v
    },

    //显示数据
    getInfo() {
      this.checkedData = this.$store.getters.curCourse
      this.coverImgInfo = this.checkedData.hasOwnProperty('sysAttachment')
        ? this.checkedData.sysAttachment
        : ''
      for (let i in this.checkedData) {
        if (this.form.hasOwnProperty(i)) {
          this.form[i] = this.checkedData[i] || ''
        }
      }
    },
    submitForm(form) {
      if (this.form.sourceType == 1 && this.$store.getters.labelType == 1) {
        this.form.title = ''
      }
      this.form.labelValue = this.form.labelValue.toString()
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.edit()
        }
      })
    },
    //编辑
    edit() {
      this.form.content = this.$refs.ueditor.message
      sysCourseUpdate(this.form).then((res) => {
        this.getInfoById()
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    getInfoById() {
      sysCourseQuery({ id: this.form.id }).then((res) => {
        let row = res.data.data[0]
        this.$store.commit('SETCURCOURSE', row)
      })
    },
    titleShow() {
      this.type = this.$route.meta.type
      if (this.form.sourceType == 2) {
        this.courseTitleShow = false
      } else {
        if (this.type == 1 || this.type == 5) {
          this.courseTitleShow = true
        } else {
          this.courseTitleShow = false
        }
      }
    },
  },
}
</script>
<style scoped>
.course-setting {
  position: absolute;
  left: 20px;
  top: 20px;
  right: 20px;
  bottom: 55px;
}
.form-scroll {
  position: absolute;
  left: 20px;
  top: 20px;
  right: 20px;
  bottom: 61px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.course-setting .save {
  position: absolute;
  bottom: 10px;
  left: 0;
  padding-top: 10px;
  padding-left: 130px;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #ddd;
}
</style>